<!-- 日志 -->
<template>
    <!-- 查询 -->
<el-row :gutter="12" class="demo-radius">
      <el-col
        :span="6"
        :xs="{ span: 12 }"
      >
        <div
          class="radius"
        >
          <div class="left">
            操作：
            <el-input
              v-model="search.keywords"
              size="small"
              style="
                width: 150px;
                box-shadow: 0px 0px 2px 0.3px #88888831;
                height: 33px;
              "
            />
            <div id="require">
          <el-button type="primary" @click="returnFn()">查询</el-button>
        </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-table :data="getLogData" style="width: 100%" class="table">
      <el-table-column label="序号" prop="id" />
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="操作" prop="operation" />
      <el-table-column label="IP" prop="ip" />
      <el-table-column label="方法" prop="method" />
      <el-table-column label="参数" prop="param" />
      <el-table-column label="时间" prop="time" />
      <el-table-column label="创建时间" prop="createTime" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:page-size="pageSize"
      background
      @current-change="pageChange"
      layout="prev, pager, next"
      :total="store.state.log.tableTotal"
      class="mt-4"
    />
  </template>
  
  <script lang="ts" setup>
  import { computed, onBeforeMount, reactive, ref } from 'vue'
import { mapGetters, mapMutations } from 'vuex';
import { useStore } from 'vuex';
const store=useStore();  

    //查询
    const returnFn = () => {
        setLogData({
      currentPage: 1,
      pageSize: pageSize.value,
      keywords:search.keywords
    });
};

  //输入框为空时重新拿取数据
  
    const search =  reactive({
        keywords: null,
});

  interface User {
    date: string
    name: string
    address: string
  }
 
const getLogData = computed(
      mapGetters(["getLogData"]).getLogData.bind({
        $store: store,
      })
    );

//分页
const pageSize = ref(5);
    const setLogData = mapMutations([
      "setLogData",
    ]).setLogData.bind({
      $store: store,
    });
    onBeforeMount(() => {
        setLogData({
        currentPage: 1,
        pageSize: pageSize.value,
      });
    });
    const pageChange = (currentPage: any) => {
        setLogData({ currentPage: currentPage, pageSize: pageSize.value,
          keywords:search.keywords
         });
    };

  const handleEdit = (index: number, row: User) => {
    console.log(index, row)
  }
  const handleDelete = (index: number, row: User) => {
    console.log(index, row)
  }

  </script>
  <style scoped>
  .table {
  border: 1px solid #88888831;
  box-shadow: 0px 0px 5px 2.5px #88888831;
  margin-bottom: 30px;
}
.demo-radius  .radius {
  height: 60px;
  width: 1190px;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin: 20px 0px;
  box-shadow: 0px 0px 5px 2.5px #88888831;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #ffffff;
}
.left {
  color: #676a6d;
}
#require{
 float: right;
 margin-left:20px
}
</style>
  